import React from 'react';
import ReactDOM from 'react-dom';
import u from '../common.js';
import { Link } from 'react-router-dom'
import Pop from './popup.jsx';
import { Pagination, Modal, Button, Select, Input, message, Popover } from 'antd';
import '../static/tero/table.less';
import '../static/app.less';
import $ from 'jquery'
import Disposal from './disposal';
let query = document.querySelector.bind(document)
let queryAll = document.querySelectorAll.bind(document)
// document.onselectstart = function () { return false; };
let updateProps = false;
const Option = Select.Option;

class Table extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            index: 1,
            display: 'none',
            list: [{ index: 1, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 2, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 3, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 4, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 5, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 6, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 7, flag: false, num: false, flag2: false, num2: false, gray: false }, { index: 8, flag: false, num: false, flag2: false, num2: false, gray: false }],
            flag: false,
            number: null,       //控制打开哪一个表格每行的弹框
            down: true,            //
            numflag: true,        //控制表格研判及箭头的弹出框
            operation: [],       //表格上方ul
            sentenceFlag: false, //表格上方研判按钮的弹出框flag
            grayIndex: 0,
            detail: [],
            num: null,
            currentCount: 0,
            newSearchDetail: [],
            pageSize: 10,
            visible: false,
            visible2: false,
            visible3: false,
            visibleAdd: false,
            total: null,
            idBlack: null,
            idWhite: null,
            idUndetermined: null,
            addKeyWord: '',
            addKeyWords: '',
            delArr: [],
            checked: 0,
            checkedArr: [],
            checkedAll: [],
            checkId: [],
            delVisible: false,
            oneVisible: false,
            updataId: null,
            exVisible: false,
            grabInformation: '',
            selectWord: '抓取信息',
            sourceWorld: '来源',
            selectWordBW: '处置方式',
            chizhiren: '处置人',
            chizhirenList: [],
            current: 1
        }
    }

    componentWillReceiveProps() {
        if (this.props.baten !== 'keywords') {
            setTimeout(()=>{
                if (this.props.searchDetil.length > 0 && this.props.searchDetil) {
                    updateProps = true
                }
            },50)
        }
    }

    updateDate() {
        setInterval(() => {
            if (updateProps) {
                if (this.props.kongList === true) {
                    this.setState({
                        detail: []
                    })
                } else {
                this.setState({
                    detail: this.props.searchDetil,
                    currentCount: 0,
                    current: 1,
                    total: this.props.totalNum
                }, () => {
                    updateProps = false
                })
            }
            }
        }, 10)
    }

    componentDidMount() {
        if (this.props.baten === 'capture') {
            this.snatchAt()
        }
        if (this.props.baten === 'disposal') {
            this.findMessage()
            u.chizhiList(data =>{
                let list = data.user.map((el,index) => {
                    return {
                        userName: el.userName,
                        id: index + 1,
                        name: el.userName
                    }
                })
                list.unshift({userName: "全部", id: 0, name: ""})
                this.setState({
                    chizhirenList: list
                },() =>{
                })
            })
        }
        if (this.props.baten === 'keywords') {
            localStorage.setItem('grabInformation', '')
            this.keyWordsAll()
        }
        if (this.props.baten !== 'keywords') {
            this.updateDate()
        }
    }

    keyWordsAll() {
        u.keyWordsAll({
            currentCount: this.state.currentCount === 0 ? this.state.currentCount : ((this.state.currentCount) * 10),
            pageSize: this.state.pageSize
        }, data => {
            this.setState({
                detail: data.keyWordList,
                total: data.total
            })
        })
    }

    findMessage() {
        u.findMessage({
            currentCount: this.state.currentCount === 0 ? this.state.currentCount : ((this.state.currentCount) * 10),
            pageSize: this.state.pageSize
        }, data => {
            this.setState({
                detail: data.ActionData,
                total: data.total - 1
            })
        })
    }

    // 数据抓取
    snatchAt() {
        u.getMessage({
            currentCount: this.state.currentCount === 0 ? this.state.currentCount : ((this.state.currentCount) * 10 + 1),
            pageSize: this.state.pageSize
        }, data => {
            this.setState({
                detail: data.indexList,
                total: data.total,
                // total: data.total ===0 ? 0 :  data.total - 1
            })
        })
    }

    onChangeSize = (page) => {
        this.setState({
            currentCount: page-1,
            current: page
        }, () => {
            localStorage.setItem('searchChangeNum', 'no')
            if (this.props.baten === 'capture') {
                if (this.props.searchDetil.length > 0 && this.props.reset !== 1) {
                    u.searchMessage({
                        content: this.props.content,
                        source: localStorage.getItem('getSource'),
                        publish_time: this.props.publishTime,
                        endTime: this.props.endTime,
                        currentCount: this.state.currentCount === 0 ? this.state.currentCount : ((this.state.currentCount) * 10 + 1),
                        pageSize: this.state.pageSize,
                    }, data => {
                        this.setState({
                            detail: data.indexListByCondition,
                            total: data.total
                        })
                    })
                } else if(localStorage.getItem('getSource') && localStorage.getItem('getSource') !== 'null' ) {
                    u.searchMessage({
                        "description": localStorage.getItem('jingquechaxun'),
                        "source": localStorage.getItem('getSource'),
                        "publish_time": localStorage.getItem('timeStart'),
                        "endTime": localStorage.getItem('timeEnd'),
                        currentCount: this.state.currentCount === 0 ? this.state.currentCount : ((this.state.currentCount) * 10 + 1),
                        pageSize: this.state.pageSize,
                    },data =>{
                        this.setState({
                            detail: data.indexListByCondition,
                            total: data.total
                        })
                    })
                }
                else{
                    this.setState({
                        currentCount: page - 1
                    }, data => {
                        this.snatchAt()
                    })
                }
            }
            if (this.props.baten === 'disposal') {
                if (this.props.searchDetil.length > 0 && this.props.reset !== 1) {
                    u.findActionData({
                        create_time: this.props.publishTime,
                        actionUser: localStorage.getItem('getchizhiren'),
                        grabInformation: localStorage.getItem('grabInformation'),
                        currentCount: this.state.currentCount === 0 ? this.state.currentCount : ((this.state.currentCount) * 10 + 1),
                        isPass: localStorage.getItem('isPass'),
                        description: this.props.url,
                        endTime: this.props.endTime,
                        pageSize: this.state.pageSize,
                        source: localStorage.getItem('disposalSource'),
                    }, data => {
                        this.setState({
                            detail: data.ActionDataByCondition,
                            total: data.total
                        })
                    })
                } else if (
                    (localStorage.getItem('grabInformation') && localStorage.getItem('grabInformation') !== 'null') ||
                    (localStorage.getItem('disposalSource') && localStorage.getItem('disposalSource') !== 'null') ||
                    (localStorage.getItem('getchizhiren')) || 
                    (localStorage.getItem('isPass'))
                    ) {
                    u.findActionData({
                        actionUser: localStorage.getItem('getchizhiren'),
                        create_time: localStorage.getItem('create_time'),
                        currentCount: this.state.currentCount === 0 ? this.state.currentCount : ((this.state.currentCount) * 10 + 1),
                        endTime: localStorage.getItem('endTime'),
                        isPass: localStorage.getItem('isPass'),
                        description: localStorage.getItem('description'),
                        pageSize: this.state.pageSize,
                        source: localStorage.getItem('disposalSource'),
                        grabInformation: localStorage.getItem('grabInformation'),
                    },data =>{
                        this.setState({
                            detail: data.ActionDataByCondition,
                            total: data.total,
                        })
                    })
                } else {
                    this.setState({
                        currentCount: page - 1
                    }, data => {
                        this.findMessage()
                    })
                }
            }

            if (this.props.baten === 'keywords') {
                this.setState({
                    currentCount: page - 1
                }, data => {
                    this.keyWordsAll()
                })
            }
        })
    }

    check(arr) {  //选中的个数极其索引
        let brr = [];
        let crr = arr.filter((item, index) => {
            return item.flag ? brr.push(index + 1) : ''
        })
        this.setState({
            list: arr,
            checked: crr.length,
            checkedArr: brr,
            checkedAll: crr,
        })
    }

    toggleAll() {   //全选的切换
        this.setState({
            flag: !this.state.flag
        }, () => {
            if (this.state.flag === true) {
                this.setState({
                    checkAll: true
                })
            } else {
                this.setState({
                    checkAll: false
                })
            }
        })
        let arr = this.state.detail.slice(0)
        arr.forEach((item, index) => {
            arr[index].flag = !this.state.flag
        })
        this.check(arr);
    }

    toogle(index) { //单个的切换
        let arr = this.state.detail.slice(0);
        arr[index].flag = !arr[index].flag;
        arr.some((item) => {
            return !item.flag
        }) ? this.setState((prevState, props) => ({
            flag: false
        })) : this.setState((prevState, props) => ({
            flag: true
        }))
        this.check(arr);   //选中的数组
    }

    pop(index, number) { //控制打开pop遮罩弹框的类型
        this.setState({
            index: index,
            display: 'block',
            grayIndex: number
        })
        setTimeout(() => {
            this.setState({
                index: index,
                display: 'block',
                grayIndex: number
            })
        },50)
    }
    popProp(val, number, index) { // 用来关闭遮罩弹框
        this.setState({
            display: val
        })
        if (number == 8) {
            if (index) {
                // let arr = this.state.list.slice(0);
                // arr[index].gray = true;
                // this.setState({
                //     list:arr
                // })
                $('.table_list tr:eq(' + index + ')').css('color', '#9ba2ab')
            }
        }
    }
    leave(index) { //控制鼠标离开关闭弹出框
        if (index == -1) {
            this.setState({
                sentenceFlag: false
            })
        } else {
            let arr = this.state.list.slice(0);
            arr[index].num = false;
            arr[index].num2 = false;
            this.setState({
                list: arr
            })
        }
    }
    select() {
        return this.state.list.some((item, index) => {
            return item.flag
        })
    }

    showModal = (id) => {
        this.setState({
            idBlack: id
        })
        this.setState({
            visible: true,
        });
    }

    handleOk = (e) => {
        u.blackId({
            id: this.state.idBlack,
            actionUser: localStorage.getItem('username')
        }, data => {
            if (data.code == 200) {
                message.success(data.message);
            }
            u.searchMessage({
                "description": localStorage.getItem('jingquechaxun'),
                "source": localStorage.getItem('getSource'),
                "publish_time": localStorage.getItem('timeStart'),
                "endTime": localStorage.getItem('timeEnd'),
                currentCount: this.state.currentCount === 0 ? this.state.currentCount : ((this.state.currentCount) * 10 + 1),
                pageSize: this.state.pageSize,
            },data =>{
                this.setState({
                    detail: data.indexListByCondition,
                    total: data.total
                })
            })
        })
        this.setState({
            visible: false,
        });
    }

    handleCancel = (e) => {
        this.setState({
            visible: false,
        });
    }

    showModal2 = (id) => {
        this.setState({
            idWhite: id
        })
        this.setState({
            visible2: true,
        });
    }

    handleOk2 = (e) => {
        u.whiteId({
            id: this.state.idWhite,
            actionUser: localStorage.getItem('username')
        }, data => {
            if (data.code == 200) {
                message.success(data.message);
            }
            u.searchMessage({
                "description": localStorage.getItem('jingquechaxun'),
                "source": localStorage.getItem('getSource'),
                "publish_time": localStorage.getItem('timeStart'),
                "endTime": localStorage.getItem('timeEnd'),
                currentCount: this.state.currentCount === 0 ? this.state.currentCount : ((this.state.currentCount) * 10 + 1),
                pageSize: this.state.pageSize,
            },data =>{
                this.setState({
                    detail: data.indexListByCondition,
                    total: data.total
                })
            })
        })
        this.setState({
            visible2: false,
        });
    }

    handleCancel2 = (e) => {
        this.setState({
            visible2: false,
        });
    }

    // showModal3 = (id) => {
    //     this.setState({
    //         idUndetermined: id
    //     })
    //     this.setState({
    //         visible3: true,
    //     });
    // }

    handleOk3 = (e) => {
        u.isUndetermined({
            id: this.state.idUndetermined
        }, data => {
            if (data.code == 200) {
                message.success(data.message);
            }
        })
        this.setState({
            visible3: false,
        });
    }

    handleCancel3 = (e) => {
        this.setState({
            visible3: false,
        });
    }

    onChose = (id) => {
        $('.keyWordNull').val('')
        if (id) {
            this.setState({
                visibleAdd: true,
                updataId: id
            });
        } else {
            this.setState({
                visibleAdd: true,
            });
        }
    }

    handleOkAdd = (e) => {
        this.setState({
            visibleAdd: false,
        });
        if (this.state.addKeyWord.trim() === '' || this.state.addKeyWords.trim() === '') {
            return message.error('不能为空')
            
        }
        if (this.state.updataId !== null) {
            u.updateKeyWord({
                id: this.state.updataId,
                key_word: this.state.addKeyWord,
                key_words: this.state.addKeyWords
            }, data => {
                this.keyWordsAll()
            })
            message.success('修改成功')
        } else {
            u.addNewWord({
                key_word: this.state.addKeyWord,
                key_words: this.state.addKeyWords
            }, data => {
                this.keyWordsAll()
            })
            message.success('创建成功')
        }
        this.setState({
            updataId: null
        })
    }

    handleCancelAdd = (e) => {
        this.setState({
            visibleAdd: false,
        });
    }

    onWriteKeyWord(e) {
        this.setState({
            addKeyWord: e.target.value
        })
    }

    onWriteKeyWords(e) {
        this.setState({
            addKeyWords: e.target.value
        })
    }

    onDelete(id) {
        this.setState({
            oneVisible: true,
            checkId: id
        });
    }

    oneHandleOk = (e) => {
        this.setState({
            oneVisible: false,
        });
        let arry = []
        arry = this.state.detail.filter(el => el.id !== this.state.checkId)
        u.deleteKeyWords({
            ids: [this.state.checkId],
        }, data => {
        })
        this.setState({
            detail: arry
        })
        message.success('删除成功');
    }

    oneHandleCancel = (e) => {
        this.setState({oneVisible: false});
    }

    onAddChose() {
        this.setState({
            delVisible: true
        })
    }

    delHandleOk = (e) => {
        let arr = this.state.detail
        let array = this.state.checkedAll
        let newListId = []
        array.forEach(el => {
            newListId.push(el.id)
        })
        var newArray = arr.filter(function (item) {
            return array.indexOf(item) === -1
        });
        this.setState({
            detail: newArray,
            delVisible: false
        })
        u.deleteKeyWords({
            ids: newListId,
        }, data => {
        })
    }

    delHandleCancel = (e) => {
        this.setState({
            delVisible: false,
        });
    }

    exHandleOk = (e) => {
        this.setState({
            exVisible: false,
        });
        window.location.href= u.baseUrl + "FakeSpider/key/exportKeyWordList"
    }

    exHandleCancel = (e) => {
        this.setState({
            exVisible: false,
        });
    }

    onExport() {
        this.setState({
            exVisible: true,
        });
        // u.exportKeyWord(data => {
        // })
    }

    onGotoCapture (id,num){
        const w=window.open('about:blank');
        // w.location.href = 'http://localhost:3000/#/Postbar'
        w.location.href= u.baseUrl + 'build/index.html#/Postbar'
        localStorage.setItem("ID",id)
        localStorage.setItem("NUM",num)
    }

    onGotoCapture2 (id,num){
        const w=window.open('about:blank');
        // w.location.href = 'http://localhost:3000/#/Postbar'
        w.location.href= u.baseUrl + 'build/index.html#/Postbar'
        localStorage.setItem("ID",id)
        localStorage.setItem("NUM",num)
    }

    onSetResource(value) {
        localStorage.setItem('setResetWord2', '')
        this.setState({
            currentCount: localStorage.getItem('currentCount'),
            current: 1
        })
        if (value === 'all') {
            this.setState({
                sourceWorld: '全部'
            })
            localStorage.setItem('disposalSource', '')
            let keyWrod = ''
            this.onSelectlaiyuan(keyWrod)
        }
        if (value === 'website') {
            this.setState({
                sourceWorld: '重点网站'
            })
            localStorage.setItem('disposalSource', '重点网站')
            let keyWrod = '重点网站'
            this.onSelectlaiyuan(keyWrod)
        }
        if (value === 'searchEngine') {
            this.setState({
                sourceWorld: '搜索引擎'
            })
            localStorage.setItem('disposalSource', '搜索引擎')
            let keyWrod = '搜索引擎'
            this.onSelectlaiyuan(keyWrod)
        }
        if (value === 'circleFriends') {
            this.setState({
                sourceWorld: '朋友圈'
            })
            localStorage.setItem('disposalSource', '朋友圈')
            let keyWrod = '朋友圈'
            this.onSelectlaiyuan(keyWrod)
        }
    }
    onSelectlaiyuan(keyWrod) {
        localStorage.setItem('setResetWord', '')
        u.findActionData({
            actionUser: localStorage.getItem('getchizhiren'),
            create_time: localStorage.getItem('create_time'),
            currentCount: 0,
            endTime: localStorage.getItem('endTime'),
            isPass: localStorage.getItem('isPass'),
            description: localStorage.getItem('description'),
            pageSize: 10,
            source: keyWrod,
            grabInformation: localStorage.getItem('grabInformation')
        },data =>{
            this.setState({
                detail: data.ActionDataByCondition,
                total: data.total
            })
        })
    }

    changechizhirenList(value) {
        localStorage.setItem('currentCount', 0)
        this.setState({
            chizhiren: value,
            currentCount: localStorage.getItem('currentCount'),
            current: 1
        })
        localStorage.setItem('getchizhiren', value)
            u.findActionData({
                actionUser: localStorage.getItem('getchizhiren'),
                create_time: localStorage.getItem('create_time'),
                currentCount: 0,
                endTime: localStorage.getItem('endTime'),
                isPass: localStorage.getItem('isPass'),
                description: localStorage.getItem('description'),
                pageSize: 10,
                source: localStorage.getItem('disposalSource', '朋友圈'),
                grabInformation: localStorage.getItem('grabInformation')
            },data =>{
                this.setState({
                    detail: data.ActionDataByCondition,
                    total: data.total
                })
            })
    }

    changeSource(value) {
        localStorage.setItem('setResetWord','')
        if (value === 'all') {
            this.setState({
                sourceWorld: '全部'
            })
            let captureWord = ''
            this.onCaptureWord(captureWord)
            localStorage.setItem('getSource', '')
        }
        if (value === 'website') {
            this.setState({
                sourceWorld: '重点网站'
            })
            let captureWord = '重点网站'
            this.onCaptureWord(captureWord)
            localStorage.setItem('getSource', '重点网站')
        }
        if (value === 'searchEngine') {
            this.setState({
                sourceWorld: '搜索引擎'
            })
            let captureWord = '搜索引擎'
            this.onCaptureWord(captureWord)
            localStorage.setItem('getSource', '搜索引擎')
        }
        if (value === 'circleFriends') {
            this.setState({
                sourceWorld: '朋友圈'
            })
            let captureWord = '朋友圈'
            this.onCaptureWord(captureWord)
            localStorage.setItem('getSource', '朋友圈')
        }
    }

    onCaptureWord(captureWord) {
        localStorage.getItem('jingquechaxun')
        localStorage.getItem('timeStart')
        localStorage.getItem('timeEnd')
        u.searchMessage({
            "description": localStorage.getItem('jingquechaxun'),
            "source": captureWord,
            "publish_time": localStorage.getItem('timeStart'),
            "endTime": localStorage.getItem('timeEnd'),
            "currentCount": 0,
            "pageSize": 10,
        },data =>{
            this.setState({
                detail: data.indexListByCondition,
                total: data.total
            })
        })
    }

    handleChange(value) {
        localStorage.setItem('setReset', '')
        localStorage.setItem('currentCount', 0)
        this.setState({
            currentCount: localStorage.getItem('currentCount'),
            current: 1
        })
        if (value === 'all') {
            this.setState({
                grabInformation: '',
                selectWord: '全部'
            })
            let keyWord = ''
            this.onSelectlianxi(keyWord)
        }
        if (value === 'listQQ') {
            localStorage.setItem('grabInformation', 'QQ')
            this.setState({
                selectWord: 'QQ'
            })
            let keyWord = 'QQ'
            this.onSelectlianxi(keyWord)
        }
        if (value === 'listWechat') {
            localStorage.setItem('grabInformation', '微信')
            this.setState({
                selectWord: '微信'
            })
            let keyWord = '微信'
            this.onSelectlianxi(keyWord)
        }
        if (value === 'listPhone') {
            localStorage.setItem('grabInformation', '电话')
            this.setState({
                selectWord: '手机号码'
            })
            let keyWord = '电话'
            this.onSelectlianxi(keyWord)
        }
        if (value === 'listYuMing') {
            localStorage.setItem('grabInformation', '域名')
            this.setState({
                selectWord: '域名'
            })
            let keyWord = '域名'
            this.onSelectlianxi(keyWord)
        }
    }

    onSelectlianxi(keyWord) {
        u.findActionData({
            create_time: localStorage.getItem('create_time'),
            actionUser: localStorage.getItem('getchizhiren'),
            currentCount: 0,
            source: localStorage.getItem('disposalSource'),
            endTime: localStorage.getItem('endTime'),
            isPass: localStorage.getItem('isPass'),
            description: localStorage.getItem('description'),
            pageSize: 10,
            grabInformation: keyWord
        },data =>{
            this.setState({
                detail: data.ActionDataByCondition,
                total: data.total
            })
        })
    }

    handleChangeSelect(value) {
        localStorage.setItem('currentCount', 0)
        this.setState({
            currentCount: localStorage.getItem('currentCount'),
            current: 1
        })
        localStorage.setItem('setSelect', '')
        if (value == '') {
            localStorage.setItem('isPass', '')
            this.setState({
                selectWordBW: '全部'
            })
            this.onSelectBW(value)
        }
        if (value == '0') {
            localStorage.setItem('isPass', '0')
            this.setState({
                selectWordBW: '判黑'
            })
            this.onSelectBW(value)
        }
        if (value == '1') {
            localStorage.setItem('isPass', '1')
            this.setState({
                selectWordBW: '判白'
            })
            this.onSelectBW(value)
        }
    }

    content(item) {
        return(
            <div className='tishiStyle'>
                {item.publish_time?<div>发布时间：{item.publish_time}</div>:''}
                {item.qq?<div>QQ：{item.qq}</div>:''}
                {item.weixinhao?<div>微信：{item.weixinhao}</div>:''}
                {item.e_mail?<div>邮箱：{item.e_mail}</div>:''}
                {item.phone?<div>电话号码：{item.phone}</div>:''}
            </div>
        )
        
    }

    onSelectBW(value) {
        u.findActionData({
            actionUser: localStorage.getItem('getchizhiren'),
            create_time: localStorage.getItem('create_time'),
            currentCount: 0,
            source: localStorage.getItem('disposalSource'),
            endTime: localStorage.getItem('endTime'),
            isPass: value ==="" ? '' : Number(value),
            description: localStorage.getItem('description'),
            pageSize: 10,
            grabInformation: localStorage.getItem('grabInformation'),
        },data =>{
            this.setState({
                detail: data.ActionDataByCondition,
                total: data.total
            })
        })
    }

    render() {
        return (
            <div className='table'>
                <Modal title="添加关键词" visible={this.state.visibleAdd} onOk={this.handleOkAdd} onCancel={this.handleCancelAdd}>
                    <div className="addKeyWordStyle addTop">
                        <div className="table_left">词组名称：</div><div><Input className="keyWordNull" placeholder="请输入词组名称" style={{ width: 200 }} onChange={this.onWriteKeyWord.bind(this)} /></div>
                    </div>
                    <div className="addKeyWordStyle">
                        <div className="table_left">关键词词组：</div><div><Input className="keyWordNull" placeholder="请输入关键词词组" style={{ width: 200 }} onChange={this.onWriteKeyWords.bind(this)} /></div>
                    </div>
                </Modal>

                <Modal title="判黑" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel}>
                    <p>确定判黑吗？</p>
                </Modal>

                <Modal title="判白" visible={this.state.visible2} onOk={this.handleOk2} onCancel={this.handleCancel2}>
                    <p>确定判白吗？</p>
                </Modal>

                <Modal title="待定" visible={this.state.visible3} onOk={this.handleOk3} onCancel={this.handleCancel3}>
                    <p>确定待定吗？</p>
                </Modal>

                <Modal title="删除" visible={this.state.delVisible} onOk={this.delHandleOk} onCancel={this.delHandleCancel}>
                    <p>确定删除吗？</p>
                </Modal>

                <Modal title="删除" visible={this.state.oneVisible} onOk={this.oneHandleOk} onCancel={this.oneHandleCancel}>
                    <p>确定删除吗？</p>
                </Modal>

                <Modal title="导出" visible={this.state.exVisible} onOk={this.exHandleOk} onCancel={this.exHandleCancel}>
                    <p>确定导出吗？</p>
                </Modal>

                <Pop index={this.state.index} display={this.state.display} colse={this.popProp.bind(this)} num={this.state.grayIndex} />
                <div className='app-conter' style={{ padding: '0px' }}>
                    {this.props.baten !== 'disposal' ? <div className={this.props.baten === 'capture' ? 'countStyle' : ''}>
                        <p>共搜索到 <span>{this.state.total}</span> 条数据</p>
                        {/* <div className='app-conter-div'> */}
                            {/* <img src={require("../static/image/blueTips.png")} /> */}
                            {/* <span> 已选择{this.state.checked}项 </span> */}
                            {/* <span className='app-conter-div-lastspan'
                                onClick={() => {
                                    this.select() ? this.pop(3) : this.pop(4)
                                }}
                            >清空</span> */}
                        {/* </div> */}
                    </div> : ''}
                    <div className='app-conter-box'>
                        <div className='app-conter-top'>
                            {/* exportKeyWord导出接口 "currentCount":0,"pageSize":100,"path":"e:\\关键词列表.xls"  */}
                            <ul>
                                {
                                    this.props.operation.map((item, index) => {
                                        return (
                                            <li key={index} className="borderStyle" onClick={() => { index ===1 ? this.onAddChose(index) : index ===2? this.onChose():this.onExport()}}>{item}</li>)
                                    })
                                }
                                {/* <Button onClick={() => this.onExport()}>导出</Button> */}
                                {/* <li className="borderStyle" onClick={() => { this.onExport() }}>导出</li> */}
                                {/* <li className="borderStyle" onClick={() => { this.onAddChose() }}>删除</li>
                                <li className="borderStyle" onClick={() => { this.onChose() }}>添加</li> */}
                            </ul>
                        </div>
                        <div>
                        </div>
                    </div>

                    <table className='table_list'>
                        <tbody>
                            <tr className='activee'>
                                <td>{this.props.baten === 'keywords' ? <span className={this.state.flag ? 'active' : ''} onClick={() => { this.toggleAll() }}></span> : ''}</td>
                                <td>编号</td>
                                <td>{this.props.baten === 'keywords' ? '关键词名' : this.props.baten === 'disposal' ? '标题' : '疑似有害信息'}</td>
                                <td>{this.props.baten === 'capture' ?
                                <div>
                                    <Select style={{ width: 100 }} value={localStorage.getItem('setResetWord') === 'yes' ? '来源' :this.state.sourceWorld} onChange={this.changeSource.bind(this)}>
                                        <Option value="all">全部</Option>
                                        <Option value="website">重点网站</Option>
                                        <Option value="searchEngine">搜索引擎</Option>
                                        <Option value="circleFriends">朋友圈</Option>
                                    </Select>
                                </div>
                                : this.props.baten === 'disposal' ?'疑似有害信息' : '关键词组'}</td>
                                <td className="table_W">{this.props.baten === 'keywords' ? '' : this.props.baten === 'disposal' ? <div>
                                    <span>处置时间</span>
                                    <div className='tip'><span className='top'>
                                        {/* <img src={require('../static/image/table_up.png')} alt="" /> */}
                                        </span>
                                        <span className='bottom'>
                                            {/* <img src={require('../static/image/table_down.png')} alt="" /> */}
                                        </span></div></div> : ''}  {/* '关键词' */}
                                </td>
                                <td>{this.props.baten === 'capture' ? '网址' : this.props.baten === 'disposal' ? 
                                <div>
                                    <Select style={{ width: 100 }} value={localStorage.getItem('setResetWord2') === 'yes' ? '来源' :this.state.sourceWorld} onChange={this.onSetResource.bind(this)}>
                                        <Option value="all">全部</Option>
                                        <Option value="website">重点网站</Option>
                                        <Option value="searchEngine">搜索引擎</Option>
                                        <Option value="circleFriends">朋友圈</Option>
                                    </Select>
                                </div>
                                :''}</td>
                                <td>{this.props.baten === 'capture' ? '抓取信息' : this.props.baten === 'disposal' ?
                                <div>
                                    <Select style={{ width: 100 }} value={localStorage.getItem('setReset') === 'yes' ? '抓取信息': this.state.selectWord} onChange={this.handleChange.bind(this)}>
                                        <Option value="all">全部</Option>
                                        <Option value="listQQ">QQ</Option>
                                        <Option value="listWechat">微信</Option>
                                        <Option value="listPhone">手机号码</Option>
                                        <Option value="listYuMing">域名</Option>
                                    </Select>
                                </div>
                                : ''}</td>
                                <td>
                                    <span>{this.props.baten === 'keywords' ? '操作' : this.props.baten === 'capture' ? '处置方式' : 
                                <div>
                                    <Select style={{ width: 100 }} value={localStorage.getItem('setSelect') === 'yes' ? '处置方式': this.state.selectWordBW} onChange={this.handleChangeSelect.bind(this)}>
                                        <Option value="">全部</Option>
                                        <Option value="0">判黑</Option>
                                        <Option value="1">判白</Option>
                                    </Select>
                                </div>
                                }</span>
                                    {/* <div className='tip'><span className='top'><img src={require('../static/image/table_up.png')} /></span> */}
                                    {/* <span className='bottom'><img src={require('../static/image/table_down.png')} /></span></div> */}
                                </td>
                                <td><span>{this.props.baten === 'disposal' ?
                                    <div>
                                        <Select style={{ width: 100 }} value={localStorage.getItem('setResetWord') === 'yes' ? '处置人' :this.state.chizhiren} onChange={this.changechizhirenList.bind(this)}>
                                            {/* <Option value="all">全部</Option>
                                            <Option value="website">重点网站</Option>
                                            <Option value="searchEngine">搜索引擎</Option>
                                            <Option value="circleFriends">朋友圈</Option> */}

                                            {
                                                this.state.chizhirenList.map((item,index) =>{
                                                    return (
                                                        <Option value={item.name}>{item.userName}</Option>
                                                    )
                                                })
                                            }
                                        </Select>
                                    </div>
                                : ''}</span></td>
                            </tr>
                            {
                                this.state.detail.map((item, index) => {
                                    return (
                                        <tr key={index}>
                                            <td>{this.props.baten === 'keywords' ? <span className={item.flag ? 'active' : ''} onClick={() => { this.toogle(index, item.id) }}></span> : ''}</td>
                                            <td>{ this.state.currentCount === 0 ? index + 1 : (this.state.currentCount) * 10 + index + 1}</td>
                                            <td>
                                                <p>
                                                    {this.props.baten === 'keywords' ? item.key_word : this.props.baten === 'disposal' ? item.title :
                                                    <div style={{cursor: 'pointer'}} className="addressStyle" onClick={this.onGotoCapture.bind(this,item.id,2)}>
                                                    {/* <Link to={{ pathname: "/Postbar", state: { id: item.id, from: 2 } }}> */}

                                                    <Popover className='popStyle' content={this.content(item)} title={item.account_nickname} trigger="hover">
                                                        {item.description?item.description:item.content}
                                                    </Popover>
                                                    {/* </Link> */}
                                                    </div>}
                                                </p>
                                            </td>
                                            <td>
                                                {this.props.baten === 'keywords' ? item.key_words :
                                                this.props.baten === 'disposal' ? <p style={{cursor: 'pointer'}} onClick={this.onGotoCapture2.bind(this,item.id,1)}>
                                                    {/* <Link to={{ pathname: "/Postbar", state: { id: item.id, from: 1 } }}> */}
                                                    {item.content?item.content:item.description}
                                                    {/* </Link> */}
                                                    </p> :
                                                    <p>{item.source}</p>}
                                            </td>
                                            <td><p>{this.props.baten === 'keywords' ? '' : this.props.baten === 'disposal' ? item.action_time : item.keyWords}</p></td>
                                            <td>
                                                {this.props.baten === 'capture' ? <a href={item.account_url} target="_blank">{item.account_url}</a> : this.props.baten === 'disposal' ? <div>{item.source}</div> :'' }
                                            </td>
                                            <td>{this.props.baten === 'disposal' ? item.grabInformation : this.props.baten === 'capture' ?
                                            ((item.qq?'QQ：' + item.qq +' ' : '') + (item.weixinhao?'微信：' + item.weixinhao +' ' : '') + (item.phone?'手机号码：' + item.phone +' ' : '') + (item.e_mail?'邮箱：' + item.e_mail +' ' : '') + (item.domain?'域名：' + item.domain +' ' : ''))
                                            : ''}</td>
                                            <td>
                                                {this.props.baten === 'keywords' ? <div>
                                                    <span className='delete' onClick={() => { this.onChose(item.id) }}>修改</span>
                                                    <span className='look' onClick={() => { this.onDelete(item.id) }}>删除</span></div>
                                                    : this.props.baten === 'disposal' ? <div>{item.isPass === 0 ? '判黑' : '判白'}</div>
                                                        : <div>
                                                            <Button className='look' onClick={() => { this.showModal(item.id) }}>
                                                                判黑
                                                    </Button>
                                                            <Button className='delete' onClick={() => { this.showModal2(item.id) }}>
                                                                判白
                                                    </Button>
                                                            {/* <Button className='wait' onClick={() => { this.showModal3(item.id) }}>
                                                                判灰
                                                    </Button> */}
                                                        </div>}
                                            </td>
                                            <td>
                                                {this.props.baten === 'disposal' ? item.actionUser : ''}
                                            </td>
                                        </tr>
                                    )
                                })
                            }
                        </tbody>
                    </table>
                </div>
                {
                    this.state.detail.length !== 0 ? 
                    <div className="fengYe">
                        <Pagination current={this.state.current} onChange={this.onChangeSize} total={this.props.total ? this.props.total - 1 : this.state.total - 1} />
                    </div> : ''
                }
                {
                    this.state.detail.length === 0 && this.props.baten === 'capture' ?  <div className='noDate'>当前数据已处理完毕！</div> : ''
                }
            </div>
        )
    }
}

export default Table